<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div>
       <h1>The Ajax 01 Page</h1>
       <button  onclick="doAjaxStart()">Ajax Get Request Start</button>
       <span id="result"></span>
   </div>
 <script>
     function doAjaxStart(){//JS中问题的调试-日志，debugger，排除法
         //console.log("===doAjaxStart()===")
         //debugger //在浏览器控制台打开状态下断点才会生效
         //1.create xhr对象(此对象是ajax应用的入口对象)
         let xhr=new XMLHttpRequest();
         //2.设置状态监听(监听客户端与服务端的通讯过程)
         xhr.onreadystatechange=function(){//此函数在客户端与服务端的通讯状态发生变化时执行
             if(xhr.readyState==4){//4 表示服务端响应到客户端结果，客户端已接收完成
                 if(xhr.status==200){//200 表示服务端处理请求的过程是ok的
                     let result=xhr.responseText;//获取服务端响应到客户端的文本信息
                     document.getElementById("result").innerHTML=result;
                 }
             }
         }
         //3.建立一个与服务端指定url的链接
         let url="http://localhost/doAjaxStart";
         xhr.open("Get",url,true);//true表示异步请求
         //4.发送请求
         xhr.send(null);//这个请求交给谁去发送？(ajax 引擎)
         console.log("===main===")
     }
 </script>
</body>
</html>